<!--Copyright https://gitee.com/laiyw/monitor-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Server Monitor Disk</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf8"/>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="bootstrap/css/bootstrap-table.min.css"/>
</head>
<body>
<div class="container">
    <table id="diskInfoTable" class="table table-hover" style="margin-top: 10px;"></table>
</div>
<script src="js/jquery.min.js" type="text/javascript" charset="utf8"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf8"></script>
<script src="bootstrap/js/bootstrap-table.min.js" type="text/javascript" charset="utf8"></script>
<script src="bootstrap/js/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf8"></script>
<script src="js/common.js" type="text/javascript" charset="utf8"></script>
<script type="text/javascript">
    $.namespace("monitor.disk");
    monitor.disk = function () {
        return {
            init: function () {
                this.initTable();
                monitor.common.buildHeadAndInitInterval(5, this.ajax);
            },
            ajax: function () {
                $.ajax({
                    type: 'POST',
                    url: 'disk.json',
                    dataType: "json",
                    success: function (data) {
                        $('#diskInfoTable').bootstrapTable('load', data);
                    }
                });
            },
            initTable: function () {
                $('#diskInfoTable').bootstrapTable({
                    columns: [{
                        title: '#',
                        formatter: function (value, row, index) {
                            return index + 1;
                        }
                    }, {
                        field: 'dirName',
                        title: '盘符路径'
                    }, {
                        field: 'sysTypeName',
                        title: '文件系统'
                    }, {
                        field: 'typeName',
                        title: '盘符类型'
                    }, {
                        field: 'total',
                        title: '总大小'
                    }, {
                        field: 'avail',
                        title: '可用大小'
                    }, {
                        field: 'used',
                        title: '已用大小'
                    }, {
                        field: 'usedPercent',
                        title: '已用百分比'
                    }],
                    data: []
                });
            }
        }
    }();

    $(document).ready(function () {
        monitor.disk.init();
    });
</script>
</body>
</html>